<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 表头部分 -->
        <el-row type="flex" justify="space-around">
          <el-col :span="24">
            <span style="font-weight: 700 ;padding-right: 10px">关键字</span>
            <el-input v-model="input" placeholder="根据编号搜索" style="width:400px" />
          </el-col>

          <el-col :span="4">
            <el-button @click="close">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
        <!-- 表头阴影部分 -->
        <el-alert show-icon el-icon-info :title="num" type="info" style="margin-top: 20px" />
      </div>
      <!-- 主体部分 -->
      <el-table :data="dataList" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="200" />
        <el-table-column fixed prop="questionType" label="题型" width="150">
          <!-- 使用过滤器显示题目的类型（多选，单选，简答） -->
          <template v-slot="{row}">{{ row.questionType | questionFilter }}</template>
        </el-table-column>

        <el-table-column fixed label="题目编号" width="300">
          <template slot-scope="scope">
            <div
              v-for="(item,index) in scope.row.questionIDs"
              :key="index"
              class="questionIDs"
              @click="showVisible(item.id)"
            >
              <a>{{ item.number }}</a>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="addTime" label="录入时间" width="200" />
        <el-table-column prop="totalSeconds" label="答题时间" width="150" />
        <el-table-column prop="accuracyRate" label="正确率(%)" width="150" />
        <el-table-column prop="userName" label="录入人" width="150" />
        <el-table-column prop="zip" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              plain
              type="danger"
              size="small"
              circle
              class="el-icon-delete"
              @click="delet(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页部分 -->
      <el-row type="flex" justify="end" style="margin: 15px 30px 0 0;">
        <el-pagination
          background
          :page-sizes="[20, 30, 50, 100]"
          :page-size="this.pagination.pagesize"
          :current-page="pagination.currentPage"
          layout=" prev, pager, next,sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <Preview
      ref="previews"
      :dialog-visible.sync="dialogVisible"
      :myid="myid"
      @visibleCancel="handleClose"
    />
  </div>
</template>
<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import { questionType } from '@/api/hmmm/constants'
import Preview from '../components/questions-preview.vue'
export default {
  name: '',
  // 题库类型过滤器（单选，多选，简答）
  filters: {
    questionFilter(val) {
      const data = questionType.find((it) => it.value === Number(val))
      return data ? data.label : '未知'
    }
  },
  components: {
    Preview
  },
  props: {},
  data() {
    return {
      // 弹出框
      dialogVisible: false,
      // 接收数据数组
      dataList: [],
      dataName: [],

      // 输入框数据
      input: '', // 双向绑定数据框
      num: '', // 记录总共多少条
      id: '', // 外层id   ps:b71374684249966826031
      pid: '', // 接收id数组
      useId: '', // 查询时所用ID
      total: null, // 记录总条数
      thisuseId: '', // 记录内存数组
      limit: '', // 一页几条
      myid: '', // 弹窗查询所需id
      // 分页数据
      pagination: {
        page: 1, // 第几页
        pagesize: 20, // 一页多少条
        currentPage: 1
      }
    }
  },
  computed: {},
  watch: {},
  // 页面加载获取渲染页面所需参数
  created() {
    this.getList()
  },
  methods: {
    // 打开弹出层（将id传出给子组件）
    showVisible(id) {
      // 弹出弹层
      this.dialogVisible = true
      // 拿到点击证书所需id
      this.myid = id
      // 拿到子组件实例上的方法，传出id
      this.$refs.previews.detail({ id: this.myid })
    },
    // 关闭弹窗
    handleClose(isDialog) {
      this.dialogVisible = isDialog
      // c从新拉去页面数据
      // this.getList()
    },
    // 获取数据接口
    async getList() {
      // 调用接口，传入配置项，拿到=数据
      const { data } = await randoms(this.pagination)
      // 得到里层数组数据
      this.dataList = data.items
      // 页面总条数
      this.total = data.counts
      // 第二栏数据显示数据
      this.num = `共 ${data.counts} 条记录`

      // 查寻时所用的id
      this.pid = data.items.map(item => {
        return item.id
      }
      )
      this.useId = this.pid.toString()
      // 获取证书数据(数组)
      this.dataName = this.dataList.map((item) => {
        return item.questionIDs
      })
      // 得到里层数组数据
      this.thisuseId = this.dataName.map((item) => {
        return item
      })
      // 外层id
      this.id = data.items.map((t) => {
        return t.id
      })
    },

    // 每页显示信息条数
    handleSizeChange(pagesize) {
      // 得到页面一页多少条数据
      this.pagination.pagesize = pagesize
      // 发生改变时传入配置对象，条数
      this.getList(this.pagination, pagesize)
      this.pagination.page = 1
    },

    // 进入某一页
    handleCurrentChange(newpage) {
      // 得到新的配置页
      this.pagination.page = newpage
      // 将配置页作为参数传到获取列表
      this.getList(newpage)
    },
    // 清空
    close() {
      this.input = ''
      // 重啦列表
      this.getList()
    },
    // 搜索
    search() {
      this.dataList.forEach((t) => {
        if (this.input === t.id) {
          this.dataList = []
          this.dataList.push(t)
        } else {
          this.num = `共${this.dataList.length}条记录`
          return ''
        }
      })
    },

    // 删除
    delet(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {
          removeRandoms(id)
          this.getList()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.questionIDs {
  color: blue;
}
</style>
